<template>
  <div>
    <el-dialog
      class="add_dialog"
      width="600px"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="120px"
      >
        <el-form-item
          label="所在地址:"
          prop="provinceArr"
        >
          <el-cascader
            clearable
            filterable
            placeholder="请选择"
            v-model="form.provinceArr"
            :options="areaList"
            :props="optionProps"
            separator="-"
            @change="form.address=''"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="地址详细信息"
          prop="address"
        >
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请如实填写您的租赁地址信息！"
            v-model="form.address"
            :maxlength="150"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="服务承诺"
          prop="promise"
        >
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请填写服务承诺"
            v-model="form.promise"
            :maxlength="150"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="dialogVisible = false"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRegion } from "@/api/index";
import { addOrEditLeaseAddress, leaseAddressById } from "@/api/shop";
export default {
  props: ["editId"],
  data() {
    return {
      dialogVisible: false,
      form: {
        provinceArr: '',
        address: '',
        promise: ''
      },
      rules: {
        provinceArr: [
          { required: true, message: '请选择所在地址', trigger: 'change' },
        ],
        address: [
          { required: true, message: '地址详细信息不能为空', trigger: 'blur' },
        ],
        promise: [
          { required: true, message: '服务承诺不能为空', trigger: 'blur' },
        ]
      },
      areaList: [],
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.editId ? "编辑租赁地址" : "添加租赁地址";
    }
  },
  methods: {
    getSelect() {
      getRegion().then(res => {
        this.areaList = res ? res[0].sub : [];
      })
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = { ...this.form };
          params.province = params.provinceArr[0];
          params.city = params.provinceArr[1];
          params.area = params.provinceArr[2];
          delete params.provinceArr;
          if (this.editId) {
            params.id = this.editId;
          }
          addOrEditLeaseAddress(params).then(res => {
            this.dialogVisible = false;
            this.$emit('getList');
          })
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error"
          });
          return false;
        }
      });
    },
    getData() {
      leaseAddressById(this.editId).then(res => {
        const { province, city, area, address, promise } = res;
        this.form.provinceArr = [province, city, area];
        this.form.address = address;
        this.form.promise = promise;
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getSelect();
        this.$nextTick(() => {
          this.$refs['form'].resetFields();
          if (this.editId) {
            // 编辑
            this.getData();
          }
        });
      } else {
        this.form = {
          provinceArr: '',
          address: '',
          promise: ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
